import { defineComponent, h } from "vue"
import { getValueByModel, setValueByModel } from "./../util"
import { useEditComponents, useEditComponentOptions  } from "./hooks"


export const DateComponent = defineComponent (
    (props: CellProps) => {
        const { inputRef, visible, visibleComponent } = useEditComponents(props)
        visibleComponent()

        return () => h('input', {
            ref: inputRef,
            class: { 'edit-control-components': 1, visible: visible.value  },
            value: getValueByModel(props.column.dataIndex, props.record),
            onInput: (event: InputEvent) => setValueByModel(props.column.dataIndex, props.record, event?.target?.value),
            type: 'date',
        })
    },
    useEditComponentOptions()
)